<template>
  <div style="padding: 20px;" class="规格尺寸">
    <el-button type="success" class="el-icon-plus" @click="add"> 添加</el-button>
    <el-button type="danger" class="el-icon-edit"> 编辑</el-button>
    <div style="overflow-y: auto;margin: 20px 0;">
      <el-tabs v-model="editableTabsValue" type="card" editable @tab-click="handleTabsclick" @tab-remove="remove">
        <el-tab-pane :key="item.id" v-for="item in editableTabs" :label="item.name" :name="item.name">
        </el-tab-pane>
        <el-table :data="tableData">
          <el-table-column prop="name" label="属性名称">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <div>
                <span  @click="add" style="color: #409EFF; margin-right: 5px; cursor: pointer;">编辑</span>
                <span @click="del(row)" style="color: red;cursor: pointer;">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>
    </div>
    <el-button type="success" class="el-icon-plus"> 添加子属性</el-button>
  </div>
</template>
<script>
import { tablist, tabdatal } from "@/api/specificationManage";
export default {
  data() {
    return {
      editableTabsValue: '0',
      editableTabs: [{
        title: '',
        name: '',
        content: ''
      }],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      delete: []
    }
  },
  methods: {
    handleTabsclick() {
      // console.log(this.editableTabsValue);
      // console.log(this.editableTabs.filter(r => r.name == this.editableTabsValue));
      this.gettabl({ propertyId: this.editableTabs.filter(r => r.name == this.editableTabsValue)[0].id })
      // console.log(1);
    },
    async gettablist() {
      let { data: res } = await tablist()
      this.editableTabs = res
      this.gettabl({ propertyId: this.editableTabs[0].id })
      // console.log(res);
    },
    async gettabl(params) {
      let { data: res } = await tabdatal(params)
      this.tableData = res
      // console.log(res);
    },
    edit(row) {
      console.log(row);
    },
    del(row) {
      console.log(row);
      this.$confirm('删除无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    remove(tart) {
      this.editableTabs = this.editableTabs.filter(r => r.name != tart)
    },

    add() {
      this.$router.push("/SizeManageAdd")
    }
  },
  mounted() {
    this.gettablist()
  },
  filters: {
    fmtisUse(val) {
      if (val) return '禁用'
      else return "正常"
    }
  },
}
</script>